import { DocumentCard, DocumentCardDetails, DocumentCardPreview, DocumentCardType, FontIcon, Image, ImageFit, IStackItemStyles, IStackProps, IStackStyles, IStyleFunctionOrObject, Stack, useTheme } from "@fluentui/react";
import { Skeleton } from "antd";
import React, { useEffect, useState } from "react";

const styles: IStyleFunctionOrObject<IStackProps, IStackStyles> = {
    root: {
        width: 280,
        borderRadius: 2,
        padding: 20,
        backgroundColor: '#ffffff',
        textAlign: 'center',
        marginRight: 24
    }
}

const stylesard: IStyleFunctionOrObject<IStackProps, IStackStyles> = {
    root: {
        width: 88,
        height: 88,
        borderWidth: 0,
        backgroundColor: '#434343',
        borderRadius: 12,
    }
}

type IL = '浏览器' | 'Scratch' | 'Arduino' | 'Python' | 'Micro:bit' | 'C/C++' | '其他资源'

const list: Array<IL> = ['浏览器', 'C/C++', 'Python', 'Micro:bit', 'Arduino', 'Scratch', '其他资源']

type Iinfo = {
    icon?: string
    name?: string
    url?: string
    description?: string
    version?: string
    ismac?: string
    iswin?: string
    is?: boolean
    size?: string
    releaseDate?: string
}

type I_D = {
    [key in IL]: Iinfo[];
};

const _down: I_D = {
    "C/C++": [
        {
            icon:
                "https://doubaobit.oss-cn-beijing.aliyuncs.com/c%2B%2B/icon.png",
            name: "Dev-C++",
            url:
                "https://doubaobit.oss-cn-beijing.aliyuncs.com/c%2B%2B/Dev-Cpp_5.11_TDM-GCC_4.9.2_Setup.exe",
            description: "A free, portable, fast and simple C/C++ IDE",
            version: "稳定版",
            size: "*",
            releaseDate: "*",
            ismac:
                "https://oj.hterobot.com/#/article/100025",
            iswin:
                "https://oj.hterobot.com/#/article/100025",
            is: false
        }
    ],
    其他资源: [
        {
            icon: "https://cdn.hterobot.com/vue/public/images/qudong.png",
            name: "Arduino 驱动程序",
            description: "Arduino 驱动程序是ch340 是USB转串口程序。",
            version: "稳定版",
            size: "*",
            releaseDate: "*",
            ismac:
                "http://doubaobit.oss-cn-beijing.aliyuncs.com/drivers/CH34x_Install_V1.4.pkg",
            iswin:
                "https://doubaobit.oss-cn-beijing.aliyuncs.com/drivers/wch_ch32.exe"
        },
        {
            icon:
                "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/leapmotion.png",
            name: "leapmotion",
            description: "Leap Motion是面向PC以及Mac的体感控制器.",
            version: "稳定版",
            size: "*",
            releaseDate: "*",
            ismac:
                "https://doubaobit.oss-cn-beijing.aliyuncs.com/leapmotion:mac/Leap_Motion_Setup_Mac_2.3.1.dmg",
            iswin:
                "https://doubaobit.oss-cn-beijing.aliyuncs.com/leapmotion/Leap_Motion_Orion_Setup_win_3.2.1.exe",
            is: false
        },
        {
            icon:
                "http://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/icon.ico",
            name: "机械手",
            description: "",
            version: "稳定版",
            size: "*",
            releaseDate: "*",
            ismac: "",
            iswin: "",
            is: false
        }
    ],
    浏览器: [
        {
            icon: "https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/LOGO/chrome-logo.svg",
            name: "谷歌浏览器",
            description:
                "我们推荐您使用谷歌浏览器，它目前速度最快，上课最稳定的浏览器，大名鼎鼎的谷歌公司开发的浏览器。",
            version: "稳定版",
            size: "*",
            releaseDate: "*",
            ismac: "https://www.google.cn/chrome/",
            iswin: "https://www.google.cn/chrome/"
        },
        {
            icon: "https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/LOGO/edge-icon.png",
            name: "Edge",
            description:
                "Edge 是一款功能丰富的 Web 浏览器，它提供了许多有用的功能和服务，能够帮助用户更好地浏览和操作 Web 内容，提高工作效率和生产力。",
            version: "稳定版",
            size: "*",
            releaseDate: "*",
            ismac: "https://www.microsoft.com/zh-cn/edge/download",
            iswin: "https://www.microsoft.com/zh-cn/edge/download"
        }
    ],
    Scratch: [
        {
            icon:
                "http://doubaobit.oss-cn-beijing.aliyuncs.com/scratch/.icon-ico/icon.ico",
            name: "zhimahu",
            description:
                "一款基于Scratch3.0开发的青少年编程软件，支持arduino、Doubao控制器等各种开源硬件，只需要拖动图形化程序块即可完成编程。",
            version: "稳定版",
            size: "*",
            releaseDate: "*",
            ismac: "",
            iswin: "",
            is: false
        },
        {
            icon:
                "https://doubaobit.oss-cn-beijing.aliyuncs.com/scratch2/favicon.ico",
            name: "Scratch2.0",
            description: "Scratch2.0",
            version: "稳定版",
            size: "*",
            releaseDate: "*",
            ismac: "",
            iswin:
                "https://doubaobit.oss-cn-beijing.aliyuncs.com/scratch2/Scratch-2.exe",
            is: false
        },
        {
            icon:
                "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/20190920081931702_easyicon_net_256.ico",
            name: "Scratchjr",
            description:
                "ScratchJr是一个入门级的编程语言，5-7岁的孩子可以使用它创建自己的互动故事和游戏。",
            version: "稳定版",
            size: "*",
            releaseDate: "*",
            ismac: "",
            iswin: "",
            is: false
        }
    ],
    Arduino: [
        {
            icon:
                "https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/common_45_icon.png",
            name: "Arduino",
            description:
                "Arduino基于Processing IDE开发，是Arduino官方推出的一个集成开发环境。",
            version: "稳定版",
            size: "*",
            releaseDate: "*",
            ismac: '',
            iswin:
                "https://doubaobit.oss-cn-beijing.aliyuncs.com/arduino/arduino-1.8.9-windows.exe",
            is: false
        }
    ],
    Python: [
        {
            icon: "https://doubaobit.oss-cn-beijing.aliyuncs.com/python/icon.png",
            name: "Python",
            url: "https://www.python.org/downloads/",
            description:
                "Python是一种编程语言，可以让您更快地工作，更有效地集成系统。",
            version: "稳定版",
            size: "*",
            releaseDate: "*",
            ismac: "https://oj.hterobot.com/#/article/100027",
            iswin: "https://oj.hterobot.com/#/article/100027"
        }
    ],
    "Micro:bit": [
        // {
        //     icon: "http://doubaobit.oss-cn-beijing.aliyuncs.com/forTest/icon.ico",
        //     name: "micro:bit离线版",
        //     url: "https://www.python.org/downloads/",
        //     description:
        //         "你知道可以用积木块、JavaScript和Python为BBC micro:bit编程吗? 如果你还从未用过BBC micro:bit,试试我们的MakeCode编辑器",
        //     version: "稳定版",
        //     size: "*",
        //     releaseDate: "*",
        //     ismac: "https://doubaobit.oss-cn-beijing.aliyuncs.com/forTest/makecode%E7%A6%BB%E7%BA%BF%E7%BC%96%E7%A8%8B%E8%BD%AF%E4%BB%B6%20Setup%204.1.8.exe",
        //     iswin: "https://doubaobit.oss-cn-beijing.aliyuncs.com/forTest/makecode%E7%A6%BB%E7%BA%BF%E7%BC%96%E7%A8%8B%E8%BD%AF%E4%BB%B6%20Setup%204.1.8.exe"
        // },
        {
            icon: "http://doubaobit.oss-cn-beijing.aliyuncs.com/forTest/icon.ico",
            name: "micro:bit离线版",
            url: "https://www.python.org/downloads/",
            description:
                "你知道可以用积木块、JavaScript和Python为BBC micro:bit编程吗? 如果你还从未用过BBC micro:bit,试试我们的MakeCode编辑器",
            version: "",
            size: "*",
            releaseDate: "*",
            ismac: "https://cdn.hterobot.com/tutorial/microbit/microbit.html",
            iswin: "https://cdn.hterobot.com/tutorial/microbit/microbit.html"
        }
    ]
}



const stackItemStyles: IStackItemStyles = {
    root: {
        alignItems: 'center',
        justifyContent: 'center',
        display: 'flex',
    },
};

const h1styles: IStyleFunctionOrObject<IStackProps, IStackStyles> = {}

const DownloadView: React.FunctionComponent = () => {
    const [active, setactive] = useState<IL>('浏览器')
    const [show, setshow] = useState(false)
    const [mylist, setlist] = useState(_down.Arduino)
    const theme = useTheme()
    function onRenderCell(item?: IL, index?: number, isScrolling?: boolean): React.ReactNode {
        return (
            <Stack
                onClick={() => setactive(item ? item : 'Arduino')}
                className="cu"
                style={{ backgroundColor: active === item ? '#434343' : '#f1f1f1', color: active === item ? '#fff' : '#8C8C8C', borderRadius: 2, marginTop: 12, marginBottom: 12, height: 38, lineHeight: '38px' }} >{item}</Stack>
        )
    }


    useEffect(() => {
        init()
    }, [])
    useEffect(() => {
        setlist(_down[active])
    }, [active])
    async function init() {
        var agent = navigator.userAgent.toLowerCase();
        if (agent.indexOf("windows") != -1) {
            const scratch = await fetch("/api/download/zhimahu/0", { cache: 'force-cache' });
            _down.Scratch[0].iswin = (await scratch.json()).url
            const jixieshou = await fetch("/api/download/source/0", { cache: 'force-cache' });
            _down.其他资源[2].iswin = (await jixieshou.json()).url;
            const scratchjr = await fetch("/api/download/scratchjr/0", { cache: 'force-cache' });
            _down.Scratch[2].iswin = (await scratchjr.json()).url;
        } else {
            const scratchmac = await fetch("/api/download/scratch/mac", { cache: 'force-cache' });
            _down.Scratch[0].ismac = (await scratchmac.json()).url;
            const jixieshoumac = await fetch("/api/download/leapMac/mac", { cache: 'force-cache' });
            _down.其他资源[2].ismac = (await jixieshoumac.json()).url;
        }
        setlist(_down[active])
        setshow(true)
    }

    return (
        <Stack >
            <Image
                src="https://cdn.hterobot.com/JOY/CloudClassroom/Banner_myclass2.png"
                width="100%"
                height={240}
                imageFit={ImageFit.centerCover}
            />
            <div className="container-xxl mt-24">
                <div className="row">
                    <Stack horizontal disableShrink className="col" >
                        <Stack.Item styles={styles} style={{ boxShadow: theme.effects.elevation4 }}>
                            <div style={{ fontSize: '18px' }} className="mb-12">软件下载</div>
                            <Stack>
                                {list.map((item, k) => {
                                    return (<Stack
                                        key={item}
                                        onClick={() => setactive(item ? item : 'Arduino')}
                                        className="cu mb-12"
                                        style={{ backgroundColor: active === item ? '#434343' : '#f1f1f1', color: active === item ? '#fff' : '#8C8C8C', borderRadius: 2, height: 38, lineHeight: '38px' }} >{item}</Stack>
                                    )
                                }
                                )}
                            </Stack>
                        </Stack.Item>
                        <Stack.Item grow style={{ padding: 20, backgroundColor: '#fff', boxShadow: theme.effects.elevation4 }}>
                            <div style={{ fontSize: '18px' }} className="pb-24">{active}</div>
                            {
                                show ? mylist.map((v, k) => {
                                    if (!show) return <div key={k}></div>
                                    return (
                                        <DocumentCard
                                            key={k}
                                            theme={theme}
                                            type={DocumentCardType.compact}
                                            style={{
                                                height: 88,
                                                maxWidth: '100%',
                                                borderWidth: 0,

                                            }}
                                            className="mb-24"
                                        >
                                            <DocumentCardPreview styles={stylesard} previewImages={[{ height: 88, imageFit: 2, width: 88, previewImageSrc: v.icon }]} />
                                            <DocumentCardDetails className="p-3">
                                                <Stack horizontal disableShrink>
                                                    <Stack.Item grow style={{ marginRight: 24 }}>
                                                        <Stack styles={h1styles} >
                                                            {v.name} {v.version}
                                                        </Stack >
                                                        <Stack style={{ color: '#8C8C8C' }} >
                                                            {v.description}
                                                        </Stack>
                                                    </Stack.Item>
                                                    <Stack.Item styles={stackItemStyles}>
                                                        <a target="_blank" href={navigator.userAgent.toLowerCase().indexOf("windows") != -1 ? v.iswin : v.ismac} className="btn btn-dark juse-1-hover" >&nbsp;&nbsp; <FontIcon style={{ fontSize: 13 }} iconName="Download" ></FontIcon> &nbsp;&nbsp;下载&nbsp;&nbsp;</a>
                                                    </Stack.Item>
                                                </Stack>
                                            </DocumentCardDetails>
                                        </DocumentCard>
                                    )
                                }) : <Skeleton></Skeleton>
                            }

                        </Stack.Item>
                    </Stack>
                </div>
            </div>
        </Stack>
    )
}

export default DownloadView
